<template>
  <div :class="wrpCls">
    <range-dropdown v-if="authPattern === 2"/>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import RangeDropdown from './RangeDropdown'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    RangeDropdown
  },
  props: {
    prefixCls: {
      type: String,
      default: 'crec-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: false,
      projectName: ''
      // currentUser: {}
    }
  },
  computed: {
    wrpCls () {
      return {
        'header-index-right': true,
        'crec-pro-global-header-index-right': true,
        [`crec-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
      }
    },
    currentUser () {
      return {
        name: this.$store.getters.nickname
      }
    },
     authPattern () {
      return this.$store.getters.auth_pattern
    }
  }
}
</script>
<style lang="less">
@import '~crec-ui/es/style/themes/default.less';
.header-index-right {
  display: flex;
}
.crec-pro-global-header-index-right {
  margin-right: 8px;

  &.crec-pro-global-header-index-dark {
    .crec-pro-global-header-index-action {
      color: hsla(0, 0%, 100%, 0.85);

      &:hover {
        background: @primary-color;
      }
    }
  }

  .crec-pro-account-avatar {
    .crec-pro-global-header-index-avatar {
      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
      margin-right: 8px;
      color: @primary-color;
      vertical-align: top;
      background: rgba(255, 255, 255, 0.85);
    }
  }

  .menu {
    .crecicon {
      margin-right: 8px;
    }

    .crec-dropdown-menu-item {
      min-width: 100px;
    }
  }
}

</style>
